<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="citySearch" :inline="true" size="mini">
                <el-form-item label="城市：">
                    <el-input v-model="citySearch.city" clearable placeholder="请输入城市"></el-input>
                </el-form-item>
                <!-- <el-form-item label="合作负责人：">
                    <el-input v-model="citySearch.principal" clearable placeholder="请输入合作负责人"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话：">
                    <el-input
                        v-model="citySearch.principalPhone"
                        clearable
                        placeholder="请输入负责人电话"
                    ></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="searchClick">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="cityTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="首字母" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.first }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[10, 50,100,150, 200]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加对话框 -->
            <el-dialog title="添加" width="600px" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addcity" ref="addcity" :rules="rules">
                    <el-form-item label="城市：" prop="city" :label-width="formLabelWidth">
                        <!-- <el-input clearable v-model="addcity.city" placeholder="请输入城市"></el-input> -->
                        <el-cascader class="search-cascader" :options="cityOptions" v-model="provinces" @change="changeProvince(1)"></el-cascader>
                    </el-form-item>
                    <el-form-item label="首字母：" prop="first" :label-width="formLabelWidth">
                        <el-input clearable v-model="addcity.first" placeholder="请输入首字母"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="600px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editcity" ref="editcity" :rules="rules">
                    <el-form-item label="城市：" prop="city" :label-width="formLabelWidth">
                        <el-input clearable v-model="editcity.city" placeholder="请输入城市" provinces></el-input>
                        <!-- <el-cascader class="search-cascader" :options="cityOptions" v-model="editVisible.city" @change="changeProvince(1)"></el-cascader> -->
                    </el-form-item>
                    <el-form-item label="首字母：" prop="first" :label-width="formLabelWidth">
                        <el-input clearable v-model="editcity.first" placeholder="请输入首字母"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import cityOptions from '../../util/city/city_data2017_element';
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 10, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            formLabelWidth: "100px", //表单label宽度
            citySearch: {
                //查询框表单
                city: "", //城市
                first: "" //首字母
            },
            addcity: {
                //添加对话框表单
                city: "", //城市
                first: "" //首字母
            },
            editcity: {
                //修改对话框表单
                id: "",
                city: "", //城市
                first: "" //首字母
            },
            rules:{
                city:[
                    {required:true,message:"请输入添加的城市",trigger:"blur"}
                ],
                first:[
                    {required:true,message:"请输入添加城市车牌首字母",trigger:"blur"}
                ]
            },
            cityTable: [
                {
                    id: 1,
                    city: "吉林", //城市
                    first: "J" //首字母
                },
                {
                    id: 2,
                    city: "深圳", //城市
                    first: "S" //首字母
                },
                {
                    id: 3,
                    city: "北京", //城市
                    first: "B" //首字母
                }
            ],
            provinces:'',
            cityOptions: cityOptions,           //全国的省市区的级联选择器的数据引入绑定
        };
    },
    methods: {
        searchClick() {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount}
            for(var i in this.citySearch) this.citySearch[i] !== '' ? data[i] = this.citySearch[i] : '';
            utils.request("/city/list","post",JSON.stringify(data)).then(resp=>{
                // console.log(resp)
                this.cityTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
            })
        },
        add() {
            // 添加券码活动
            this.addVisible = true;
        },
        confirmAdd() {
            // 确认添加
            this.$refs.addcity.validate((valid)=>{
                if(valid){       
                    let data = {}
                    for(var i in this.addcity) this.addcity[i] !== '' ? data[i] = this.addcity[i] : '';
                    utils.request("/city/add","post",JSON.stringify(data)).then(resp=>{
                        // console.log(resp)
                        data.id = resp.data.data;
                        this.cityTable.length < this.currentCount ? this.cityTable.push(data) : '';
                        this.addVisible = false;
                        this.addcity.city = ""; //城市
                        this.addcity.first = ""; //首字母
                    })
                }else{this.$message.error("添加信息不能为空")}
            })
        },
        cancelAdd() {
            // 取消添加
            this.addVisible = false;
            this.addcity.city = ""; //城市
            this.addcity.first = ""; //首字母
        },
        closeAdd() {
            // 关闭添加对话框
            this.addVisible = false;
            this.addcity.city = ""; //城市
            this.addcity.first = ""; //首字母
        },
        download(index, row) {
            // 下载
        },
        edit(index, row) {
            // 修改的触发函数
            this.editVisible = true;
            this.editcity.id = row.id; //表ID
            this.editcity.city = row.city; //城市
            this.editcity.first = row.first; //首字母
            this.editcity.index = index; //首字母
        },
        confirmEdit() {
            // 确认修改
            this.$refs.editcity.validate((valid)=>{
                if(valid){
                    let data = {}
                    for(var i in this.editcity) i !== "index" ? data[i] = this.editcity[i] : '';
                    console.log(data)
                    utils.request("/city/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        let key = this.editcity.index;
                        for(var o in data) this.cityTable[key][o] = data[o];
                        this.editVisible = false;
                        this.editcity.city = ""; //城市
                        this.editcity.first = ""; //首字母
                    })       
                }
            })
        },
        cancelEdit() {
            // 取消修改
            this.editVisible = false;
            this.editcity.city = ""; //城市
            this.editcity.first = ""; //首字母
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            this.editcity.city = ""; //城市
            this.editcity.first = ""; //首字母
        },
        remove(index, row) {
            // 删除 二级确认
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/city/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    this.cityTable.splice(index,1) 
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }) 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick()
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick()
        },
        changeProvince(num){
            // 级联选择器的省市区
            if(num===1){
                // console.log(this.provinces)
                this.provinces.forEach(ment => {
                    if(ment.charAt(ment.length-1) === '市' || ment.substring(ment.length-3) === '行政区' || ment === '台湾省'){
                        this.addcity.city = ment
                    }
                });
            }
        },
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        this.searchClick()
    }
};
</script>



